<template>
  <div>
    <van-nav-bar
      title="订单确认"
      left-text="返回"
      left-arrow
      @click-left="goback"
    />
    <my-address></my-address>
    <div class="jsdingdan" v-for="item in CheckoutList" :key="item.CatID">
      <div class="jsdp">
        <a href="dpxq.html">
          <img
            src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/dplogo.png"
          />
          <span>阿里巴巴超市</span>
        </a>
      </div>
      <div class="jsxq">
        <div class="jsxq_1">
          <img :src="item.GoodsPic" />
        </div>
        <div class="jsxq_2">
          <div class="js_1">
            <p class="p1">{{ item.GoodName }}</p>
          </div>
          <p class="p2">￥{{ item.GoodsPrice }}</p>
          <div class="js_2">
            <p class="p3">颜色：{{ item.Color }}；尺码：{{ item.Size }}</p>
            <p class="p4">×{{ item.goodsNum }}</p>
          </div>
        </div>
      </div>
      <div class="jsyf">
        <div class="jsyfL">快递运费：</div>
        <div class="jsyfR"><van-tag type="success">全国运费</van-tag></div>
      </div>
      <div class="jsyf">
        <div class="jsyfL">买家留言：</div>
        <div class="jsyfC">订单补充说明...</div>
      </div>
    </div>

    <div>
      <van-cell-group inset class="miaos">
        <van-cell title="商品总额">
          <template #right-icon>
            <h4>￥{{ Totol }}.00</h4>
          </template>
        </van-cell>
        <van-cell title="运费">
          <template #right-icon>
            <van-tag color="#7232dd">免运费</van-tag>
          </template>
        </van-cell>
        <van-cell title="立减">
          <template #right-icon>
            <h4 style="color: red">-￥3100</h4>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell class="fapiao" value="电子发票（商品明细）" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">发票</span>
        </template>
      </van-cell>
      <div class="btnbox">
        <van-button round style="width: 100%" @click="newPay" color="#7232dd"
          >立即结算</van-button
        >
      </div>
      <div style="height: 60px"></div>
    </div>
  </div>
</template>
<script>
import Address from "../components/checkout/Address.vue";
import { mapState } from "vuex";

export default {
  components: { "my-address": Address },
  data() {
    return {};
  },
  created() {},
  methods: {
    newPay() {
      if (this.$store.state.SelectAddress == undefined) {
        this.$toast("请选择地址！");
      } else {
        this.$router.push("/newPay");
      }
    },
    goback() {
      this.$router.push("/Cat");
    },
  },
  computed: {
    ...mapState(["CheckoutList", "Totol"]),
  },
};
</script>
<style lang="less" scoped>
.jsdingdan {
  padding: 0 0.5rem;
  border-top: 1px solid #eee;
  background: #fff;
  margin-top: 10px;
  border-radius: 15px;
  .jsdp {
    padding: 0.8rem 0;
    height: 1.2rem;
    line-height: 1.2rem;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    white-space: nowrap;
    img {
      height: 1.2rem;
      float: left;
    }
    span {
      font-size: 0.9rem;
      height: 1.2rem;
      line-height: 1.2rem;
      padding-left: 0.3rem;
      color: #333;
    }
  }
  .jsxq {
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    background: #fff;
    .jsxq_1 {
      float: left;
      width: 6.3rem;
      height: 6.3rem;
      padding-right: 0.5rem;
      img {
        width: 6.3rem;
        height: 6.3rem;
        border-radius: 13px;
      }
    }
    .jsxq_2 {
      flex: 1;
      height: 2.3rem;
      .js_1 {
        height: 2.5rem;
        overflow: hidden;
        .p1 {
          float: left;
          color: #333;
          font-size: 0.9rem;
          width: 85%;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .js_2 {
        height: 1.9rem;
        padding-top: 0.2rem;
        overflow: hidden;
        .p3 {
          float: left;
          color: #999;
          font-size: 0.9rem;
          width: 60%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .p4 {
          color: #333;
          float: right;
          font-size: 0.75rem;
        }
      }
    }
  }
  .jsyf {
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    background: #fff;
    .jsyfL {
      color: #333;
      float: left;
      font-size: 0.8rem;
    }
    .jsyfR {
      float: right;
      font-size: 0.8rem;
    }
    .jsyfC {
      flex: 1;
      font-size: 0.8rem;
      color: #999;
    }
  }
}
.btnbox {
  margin-top: 0.9375rem;
  padding: 0.9375rem;
}
.fapiao {
  margin-top: 0.9375rem;
}
.p2 {
  margin-top: 0.4375rem;
  font-size: 0.9rem;
  color: #ec1704;
  font-weight: 600;
}
</style>